<template>
  <div class="app-container">
    <el-row>
      <el-col :span="10" class="card-box">
        <div class="el-table el-table--enable-row-hover el-table--fit">
          <table cellspacing="0" style="width: 100%">
            <tbody>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo"><b>{{stockInfo.name}}</b></div></td>
                  <td class="el-table__cell is-leaf"><div class="cell"><b>价格：</b>
                    <span v-if="hoverAmount">
                      <span v-if="hoverChange>0" style="color:#F9293E">{{ hoverAmount }}</span>
                      <span v-else style="color:#00aa3b">{{ hoverAmount }}</span>
                    </span>
                  </div></td>
                  <td class="el-table__cell is-leaf"><div class="cell"><b>涨跌幅：</b>
                    <span v-if="hoverPctChg">
                      <span v-if="hoverChange>0" style="color:#F9293E">{{ hoverPctChg }}%</span>
                      <span v-else style="color:#00aa3b">{{ hoverPctChg }}%</span>
                    </span>
                  </div></td>
                  <td class="el-table__cell is-leaf"><div class="cell"><b>涨跌额：</b>
                    <span v-if="hoverChange">
                      <span v-if="hoverChange>0" style="color:#F9293E">{{ hoverChange }}</span>
                      <span v-else style="color:#00aa3b">{{ hoverChange }}</span>
                    </span>
                  </div></td>
                </tr>
            </tbody>
          </table>
        </div>
      </el-col>

      <!-- <el-col :span="6" class="card-box">
        <el-input
          @change="getList"
          placeholder="请输入股票代码"
          v-model="stockCode"
          clearable
        >
        </el-input>
      </el-col> -->

      <el-col :span="8" class="card-box">
        <el-select
          v-model="stockCode"
          filterable
          remote
          placeholder="请输入股票名称或代码"
          :remote-method="getStockOptions"
          :loading="loading"
          @change="getList"
          default-first-option
          >
          <el-option
            v-for="item in selectOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row>

      <el-col :span="12" class="card-box">
        <el-card>
          <div ref="echatsContainer" style="height: 700px" />
        </el-card>
      </el-col>
      <el-col :span="6" class="card-box">
        <el-card>
          <div class="el-table el-table--enable-row-hover el-table--fit">
            <table cellspacing="0" style="width: 100%">
              <tbody>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell"><b>当前价格</b></div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo">
                      <span v-if="stockInfo.change>0" style="color:#F9293E">{{ stockInfo.now }}</span>
                      <span v-else style="color:#00aa3b">{{ stockInfo.now }}</span>
                    </div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">今日开盘价</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo">{{ stockInfo.open }}</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">今日最高价</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo">{{ stockInfo.high }}</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">今日最低价</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo">{{ stockInfo.low }}</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">昨日收盘价</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo">{{ stockInfo.preClose }}</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">涨跌幅</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo">
                    <span v-if="stockInfo.change>0" style="color:#F9293E">{{ stockInfo.pctChg }}%</span>
                    <span v-else style="color:#00aa3b">{{ stockInfo.pctChg }}%</span>
                    </div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">涨跌额</div></td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" v-if="stockInfo">
                      <span v-if="stockInfo.change>0" style="color:#F9293E">{{ stockInfo.change }}</span>
                      <span v-else style="color:#00aa3b">{{ stockInfo.change }}</span>
                  </div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">成交量（手）</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo">{{ stockInfo.vol }}</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">成交额（万元）</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo">{{ stockInfo.amount }}</div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" class="card-box">
        <el-card>
          <div class="el-table">
            <table cellspacing="0" style="width: 100%">
              <tbody>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">卖5</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo">
                      <span v-if="stockInfo.sell5Amount<stockInfo.preClose" style="color:#00aa3b">{{ stockInfo.sell5Amount }}</span>
                      <span v-else style="color:#F9293E">{{ stockInfo.sell5Amount }}</span>
                      </div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo">{{ stockInfo.sell5Vol }}</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">卖4</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo">
                      <span v-if="stockInfo.sell4Amount<stockInfo.preClose" style="color:#00aa3b">{{ stockInfo.sell4Amount }}</span>
                      <span v-else style="color:#F9293E">{{ stockInfo.sell4Amount }}</span>
                    </div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo">{{ stockInfo.sell4Vol }}</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">卖3</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo">
                    <span v-if="stockInfo.sell3Amount<stockInfo.preClose" style="color:#00aa3b">{{ stockInfo.sell3Amount }}</span>
                      <span v-else style="color:#F9293E">{{ stockInfo.sell3Amount }}</span>
                      </div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo">{{ stockInfo.sell3Vol }}</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">卖2</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo">
                    <span v-if="stockInfo.sell2Amount<stockInfo.preClose" style="color:#00aa3b">{{ stockInfo.sell2Amount }}</span>
                      <span v-else style="color:#F9293E">{{ stockInfo.sell2Amount }}</span>
                    </div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo">{{ stockInfo.sell2Vol }}</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">卖1</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo">
                    <span v-if="stockInfo.sell1Amount<stockInfo.preClose" style="color:#00aa3b">{{ stockInfo.sell1Amount }}</span>
                      <span v-else style="color:#F9293E">{{ stockInfo.sell1Amount }}</span>
                    </div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo">{{ stockInfo.sell1Vol }}</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">买1</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo">
                    <span v-if="stockInfo.buy1Amount<stockInfo.preClose" style="color:#00aa3b">{{ stockInfo.buy1Amount }}</span>
                      <span v-else style="color:#F9293E">{{ stockInfo.buy1Amount }}</span>
                    </div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo">{{ stockInfo.buy1Vol }}</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">买2</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo">
                    <span v-if="stockInfo.buy2Amount<stockInfo.preClose" style="color:#00aa3b">{{ stockInfo.buy2Amount }}</span>
                      <span v-else style="color:#F9293E">{{ stockInfo.buy2Amount }}</span>
                    </div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo">{{ stockInfo.buy2Vol }}</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">买3</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo">
                    <span v-if="stockInfo.buy3Amount<stockInfo.preClose" style="color:#00aa3b">{{ stockInfo.buy3Amount }}</span>
                      <span v-else style="color:#F9293E">{{ stockInfo.buy3Amount }}</span>
                    </div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo">{{ stockInfo.buy3Vol }}</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">买4</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo">
                    <span v-if="stockInfo.buy4Amount<stockInfo.preClose" style="color:#00aa3b">{{ stockInfo.buy4Amount }}</span>
                      <span v-else style="color:#F9293E">{{ stockInfo.buy4Amount }}</span>
                    </div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo">{{ stockInfo.buy4Vol }}</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">买5</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo">
                    <span v-if="stockInfo.buy5Amount<stockInfo.preClose" style="color:#00aa3b">{{ stockInfo.buy5Amount }}</span>
                      <span v-else style="color:#F9293E">{{ stockInfo.buy5Amount }}</span>
                    </div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="stockInfo">{{ stockInfo.buy5Vol }}</div></td>
                </tr>
                
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getKData,getNow } from "@/api/stock/detail";
import { listBasic } from "@/api/stock/basic";
import { initKOption,splitData } from "@/api/stock/k-line";

import echarts from "echarts";

export default {
  name: "Detail",
  data() {
    return {
      stockCode: "300343",
      selectOptions: [],
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        keyword: ''
      },
      stockInfo: null,
      upColor: "#ec0000",
      downColor: "#00da3c",
      echartsOption: [],
      hoverAmount: null,
      hoverChange: null,
      hoverPctChg: null,
      hoverPreClose: null,
      data_split: null
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询k线数据 */
    getList() {
      this.openLoading();
      getKData(this.stockCode).then(response => {
        this.echatsContainer = echarts.init(this.$refs.echatsContainer, "light");
        var echartsOption = initKOption(response);
        this.echatsContainer.setOption(echartsOption);
        this.data_split = splitData(response);
        this.echatsContainer.on("mouseover",(param) => {
          var index = param.dataIndex;
          this.hoverPreClose = this.data_split.datas[index-1][0];
          this.hoverAmount = param.data[2];
          this.hoverChange = parseFloat(this.hoverAmount - this.hoverPreClose).toFixed(2);
          this.hoverPctChg = parseFloat(100*this.hoverChange/this.hoverPreClose).toFixed(2);
        });
        this.echatsContainer.on("mouseout",(param) => {
          this.hoverAmount = this.stockInfo.now;
          this.hoverChange = this.stockInfo.change;
          this.hoverPctChg = this.stockInfo.pctChg;
        });
      });
      getNow(this.stockCode).then(response => {
        this.stockInfo = response;
        this.hoverAmount = this.stockInfo.now;
        this.hoverChange = this.stockInfo.change;
        this.hoverPctChg = this.stockInfo.pctChg;
      });
      this.$modal.closeLoading();
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载K线图数据，请稍后！");
    },
    getFontColor(){
      if(this.stockInfo.change>0){
        return this.upColor;
      } else{
        return this.downColor;
      }
    },
    getStockOptions(query){
      if(query !='' && query.length>1){
        this.loading = true;
        this.queryParams.keyword = query;
        debugger
        listBasic(this.queryParams).then(response=>{
            this.loading = false;
            this.selectOptions = [];
            this.selectOptions = response.rows.map(item => {
              // this.stockCode = item.symbol;
              return { value: `${item.symbol}`, label: `${item.name} - ${item.symbol}` };
            });
        });
      }
    }
  }
};
</script>

<style scoped>
.Kline-div {
  position: fixed;
  width: 100%;
  bottom: 0rem;
  top: 0;
}
.Kline-div .m-line {
  height: 49%;
  width: 100%;
  margin-bottom: 1%;
}
.Kline-div .K-line {
  height: 50%;
  width: 100%;
}
</style>